<div id="column_edit_dialog" data-bind="modal: showDialog" class="modal fade content-type-editor in" data-backdrop="static" data-keyboard="false" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-bind="click:cancel"><i class="fa fa-close"></i></button>
                <h4 class="modal-title" data-bind="text: Kooboo.text.component.fieldEditor[isNew() ? 'createField' : 'editField']"></h4>
            </div>
            <!-- ko if: choosedField -->
            <div class="modal-body">
                <div id="field-editor">
                    <ul class="nav nav-tabs" data-bind="visible: !choosedField().isSystemField()">
                        <li class="active">
                            <a href="#tab_1_1" data-toggle="tab" aria-expanded="true" data-bind="text: Kooboo.text.component.fieldEditor.basic"></a>
                        </li>
                        <li class="">
                            <a href="#tab_1_2" data-toggle="tab" aria-expanded="false" data-bind="text: Kooboo.text.component.fieldEditor.advanced"></a>
                        </li>
                        <li data-bind="visible: ['Boolean', 'Selection'].indexOf(choosedField().controlType()) == -1">
                            <a href="#tab_1_3" data-toggle="tab" aria-expanded="false" data-bind="text: Kooboo.text.component.fieldEditor.validation"></a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <section class="tab-pane fade active in" id="tab_1_1">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label class="control-label col-md-3" data-bind="text: Kooboo.text.common.name"></label>
                                    <div class="col-md-9">
                                        <div class="input-group" data-bind="error: choosedField().name, errorContainer: '.name-error-container'">
                                            <!-- ko if: isNew -->
                                            <input type="text" class="form-control key" data-bind="textInput: choosedField().name">
                                            <!-- /ko -->
                                            <!-- ko if: !isNew() -->
                                            <p class="form-control-static key" data-bind="text: choosedField().name" style="word-break: break-word;"></p>
                                            <!-- /ko -->
                                            <span class="input-group-addon" data-bind="visible: !choosedField().isSystemField()">
                                                <div class="checkbox">
                                                    <label><input type="checkbox" data-bind="checked: choosedField().isSummaryField">
                                                        <!-- ko text: Kooboo.text.component.fieldEditor.summaryField -->
                                                        <!-- /ko -->
                                                    </label>
                                                </div>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="name-error-container" style="position: absolute; width: 150%;"></div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3" data-bind="text: Kooboo.text.common.displayName"></label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control key" data-bind="textInput: choosedField().displayName">
                                    </div>
                                </div>
                                <div class="form-group" data-bind="visible: choosedField().isSystemField()">
                                    <div class="col-md-9 col-md-offset-3">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" data-bind="checked:choosedField().editable"><span data-bind="text: Kooboo.text.component.fieldEditor.userEditable"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group" data-bind="visible: !choosedField().isSystemField()">
                                    <label class="control-label col-md-3" for="ControlType" data-bind="text: Kooboo.text.component.fieldEditor.controlType"></label>
                                    <div class="col-md-9">
                                        <!-- ko if: isNew -->
                                        <select data-bind="value: choosedField().controlType, options: controlTypeConfig, optionsText: 'displayName', optionsValue: 'value'" class="form-control" id="ControlType" name="ControlType"></select>
                                        <!-- /ko -->

                                        <!-- ko if: !isNew() && !controlTypeChangable() -->
                                        <p class="form-control-static" data-bind="text: Kooboo.text.component.controlType[_.camelCase(choosedField().controlType())]"></p>
                                        <!-- /ko -->

                                        <!-- ko if: !isNew() && controlTypeChangable() -->
                                        <select data-bind="value: choosedField().controlType, options: changableControlTypeConfig, optionsText: 'displayName', optionsValue: 'value'" class="form-control" id="ControlType" name="ControlType"></select>
                                        <!-- /ko -->
                                    </div>
                                </div>
                                <div class="form-group" data-bind="visible: ['selection', 'checkbox', 'radiobox'].indexOf(choosedField().controlType().toLowerCase()) > -1">
                                    <label class="col-md-3 control-label" data-bind="text: Kooboo.text.component.fieldEditor.Options"></label>
                                    <div class="col-md-9">
                                        <div class="input-groups" data-bind="foreach: selectionOptions, visible: selectionOptions().length">
                                            <div class="input-group">
                                                <span class="kb-error-holder">
                                                    <input type="text" class="form-control key input-small" data-bind="textInput: $data.key, error: $data.key, errorPlacement: 'left'">
                                                </span>
                                                <span class="input-group-addon">:</span>
                                                <span class="kb-error-holder">
                                                    <input type="text" class="form-control value input-small" data-bind="textInput: $data.value">
                                                </span>
                                                <span class="input-group-btn" data-bind="error: $data.value">
                                                    <a href="javascript:;" class="btn btn-default" data-bind="click: $parent.removeOption.bind(this)"><i class="fa fa-minus"></i></a>
                                                </span>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="javascript:;" class="btn dark" data-bind="click: addOption, attr: { disabled: !isAbleToAddOption() }, error: _optionRequired"><i class="fa fa-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div data-bind="visible: choosedField().controlType() == 'MediaFile'">
                                    <div class="form-group">
                                        <label class="col-md-3 control-label"></label>
                                        <div class="col-md-9">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" data-bind="checked:choosedField().multipleValue, disable: !isNew()"><span data-bind="text: Kooboo.text.component.fieldEditor.enableMultipleImages"></span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default margin-top-20" data-bind="visible: !choosedField().isSystemField()">
                                <div class="panel-heading">
                                    <h6 class="panel-title" data-bind="text: Kooboo.text.common.preview"></h6>
                                </div>
                                <div class="panel-body form-horizontal">
                                    <div class="form-group">
                                        <label class="control-label col-md-3" data-bind="text: choosedField().displayName() || choosedField().name()"></label>
                                        <div class="col-md-9">
                                            <img data-bind="attr:{ src:previewImage, alt: previewType }" alt="TextBox" style="max-width: 100%">
                                            <span class="help-block" data-bind="text: choosedField().tooltip"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <section class="tab-pane fade" id="tab_1_2">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label class="control-label col-md-3" for="Tooltip" data-bind="text: Kooboo.text.component.fieldEditor.tooltip"></label>
                                    <div class="col-md-9">
                                        <input type="text" id="Tooltip" name="Tooltip" data-bind="value:choosedField().tooltip, valueUpdate:'keyup'" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group" data-bind="visible: ['CheckBox', 'MediaFile', 'Selection', 'DateTime', 'Number', 'RadioBox', 'Boolean'].indexOf(choosedField().controlType()) == -1">
                                    <div class="col-md-9 col-md-offset-3">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" data-bind="checked:choosedField().multipleLanguage"><span data-bind="text: Kooboo.text.component.fieldEditor.enableMultilingual"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default margin-top-20">
                                <div class="panel-heading">
                                    <h6 class="panel-title" data-bind="text: Kooboo.text.common.preview"></h6>
                                </div>
                                <div class="panel-body form-horizontal">
                                    <div class="form-group">
                                        <label class="control-label col-md-3" data-bind="text: choosedField().displayName() || choosedField().name()"></label>
                                        <div class="col-md-9">
                                            <img data-bind="attr:{ src:previewImage, alt: previewType }" alt="TextBox" style="max-width: 100%">
                                            <span class="help-block" data-bind="text: choosedField().tooltip"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <section class="tab-pane fade" id="tab_1_3">
                            <div class="form-horizontal margin-bottom-20" data-bind="visible: validationRules().length>0">
                                <label data-bind="text: Kooboo.text.component.fieldEditor.selectValidationRules"></label>
                                <div class="form-group">
                                    <div class="col-md-9">
                                        <select class="form-control" data-bind="options:validationRules, optionsText:'displayName',optionsValue: 'value', value: validateType"></select>
                                    </div>
                                    <div class="col-md-3">
                                        <a class="btn btn-block blue" href="javascript:;" data-bind="click:addValidation, text: Kooboo.text.common.add"></a>
                                    </div>
                                </div>
                            </div>
                            <kb-validate params="validateData: choosedField().validations"></kb-validate>
                        </section>
                    </div>
                </div>
            </div>
            <!-- /ko -->
            <div class="modal-footer">
                <button class="btn green" data-bind="click:save, text: Kooboo.text.common.save"></button>
                <button class="btn gray" data-bind="click:cancel, text: Kooboo.text.common.cancel"></button>
            </div>
        </div>
    </div>
</div>